/**
 * @名称: select model of layer
 * @更新: 2021.01.27
 * @作者: yuguoliang
 * @博客：http://www.cssw3c.com
 */
;(function (window, document, undefined) {
    var $ = window.jQuery;
    var layer = window.layer;

    //Select 是一种支持单选或者多选的弹出层，它可以用来代替原生的 select 元素提供更好更一致的用户体验。Select 是一个JS组件
    $.fn.select = function (option) {
        var defaults = {
            title: null,
            multi: false,
            items: null,
            autoClose: true,
            input: null,
            closeText: '确定',
            max: 3,
            min: 2,
            split: ','
        };
        var options = $.extend({}, defaults, option);
        if (!options.items || !options.items.length) return;
        options.items = options.items.map(function (d, i) {
            if (typeof d == typeof "a") {
                return {
                    title: d,
                    value: d
                };
            } else {
                return d;
            }
        });

        return this.each(function () {
            var _self = $(this);
            if (options.input) {
                _self.val(options.input);
            }
            _self.on('click', function () {
                var oldValue = $.trim($(this).val());
                var multiVal = [];
                if (oldValue) {
                    oldValue = oldValue.split(options.split);
                    if (options.multi) {
                        multiVal = oldValue;
                    }
                }
                var isShowClose = true;
                if (!options.multi && options.autoClose) {
                    isShowClose = false;
                }
                var htmlTitle = '<div class="toolbar"><div class="toolbar-inner"><h2 class="title">' + options.title + '</h2><a class="picker-button close-select ' + (isShowClose ? '' : 'hide') + '" href="javascript:;">' + options.closeText + '</a></div></div>';
                var htmlCon = '<div class="weui-cells"><ul>';
                var className;
                $.each(options.items, function (index, item) {
                    if (oldValue && ($.inArray(item.value, oldValue) != -1)) {
                        className = options.multi ? 'weui-icon-checked-multi check' : 'weui-icon-checked';
                    } else {
                        className = options.multi ? 'weui-icon-checked-multi' : 'weui-icon-checked hide';
                    }
                    htmlCon += '<li data-val="' + item.value + '">' + item.title + '<i class="' + className + '"></i></li>';
                });
                htmlCon += '</ul></div>';
                $.popupUp({
                    className: 'layer-select-wrap',
                    content: htmlTitle + htmlCon,
                    success:function () {
                        $('.layer-select-wrap .weui-cells li').on('click', function () {
                            var tempVal = $.trim($(this).data('val'));
                            //单选
                            if (!options.multi) {
                                var siblings = $(this).siblings().find('.weui-icon-checked');
                                siblings.each(function () {
                                    if (!$(this).hasClass('hide')) {
                                        $(this).addClass('hide');
                                    }
                                });
                                $(this).find('.weui-icon-checked').removeClass('hide');
                                _self.val(tempVal);
                                if (options.autoClose) {
                                    layer.closeAll();
                                }
                            } else {
                                //多选
                                var multiLength = multiVal.length;
                                var check = $(this).find('.weui-icon-checked-multi');
                                if (check.hasClass('check')) {
                                    if (multiLength <= options.min) {
                                        //alert('请至少选择' + options.min + '个');
                                        $.msg('请至少选择' + options.min + '个','bottom');
                                        return;
                                    }
                                    check.removeClass('check');
                                    $.each(multiVal, function (index, item) {
                                        if (item == tempVal) {
                                            multiVal.splice(index, 1);
                                        }
                                    })
                                } else {
                                    if (multiLength >= options.max) {
                                        //alert('最多只能选择' + options.max + '个');
                                        $.msg('最多只能选择' + options.max + '个','bottom');
                                        return;
                                    }
                                    check.addClass('check');
                                    multiVal.push(tempVal);
                                }
                                _self.val(multiVal.join(options.split));
                            }
                        });
                        //右上角确定按钮
                        $('.layer-select-wrap .close-select').on('click', function () {
                            layer.closeAll();
                        });
                        $(".layui-m-layershade").on("touchmove", function (e) {
                            e.preventDefault();
                        });
                    }
                });
            })
        })
    }
})(window, document);
